<template>
  <div>
    <header class="header">
      <div class="warp_box">
        <div class="warp">
          <div class="warp_left">
            <span class="m_menu" @click="$router.go(-1)">
              <img src="../assets/img/phone-productlist7.png" alt />
            </span>
          </div>
          <div class="warp_logo">
            <img src="../assets/img/logo.webp" alt />
          </div>
          <div class="warp_right">
            <div class="m_tools">
              <span>
                <img src="../assets/img/search.png" alt />
              </span>
              <span>
                <img src="../assets/img/shopcar.png" alt />
              </span>
              <span>
                <img src="../assets/img/tongzhi.png" alt />
              </span>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main>
      <section class="phone-banner">
        <ul>
          <li>
            <a href>
              <img src="../assets/img/phone-productlist1.png" alt />
            </a>
            <div class="phone-banner-text">
              <div></div>
              <h2>家电购买攻略大曝光</h2>
              <p>专治家电选择困难症</p>
            </div>
          </li>
        </ul>
      </section>
      <section class="phone-bar">
        <ul>
          <li :class="active == 0 ?'phone-bar-checked': ''" @click="barClk(0)">综合</li>
          <li
            :class="active == 1 ?'phone-bar-checked': ''"
            @click="barClk(1)"
          >上市时间{{isSort.shijian ? "&nbsp;↑" : (active==1? "&nbsp;↓":"")}}</li>
          <li
            :class="active == 2 ?'phone-bar-checked': ''"
            @click="barClk(2)"
          >人气{{isSort.renqi ? "&nbsp;↑" : (active==2? "&nbsp;↓":"")}}</li>
          <li
            :class="active == 3 ?'phone-bar-checked': ''"
            @click="barClk(3)"
          >价格{{isSort.jiage ? "&nbsp;↑" : (active==3? "&nbsp;↓":"")}}</li>
        </ul>
        <div @click="openDrawer">
          <span>筛选</span>
          <img src="../assets/img/phone-productlist2.png" alt />
        </div>
      </section>
      <section class="phone-list">
        <ul>
          <li v-for="(item,index) in productClassifyData" :key="index" @click="goDetail(item)">
            <div class="list-box">
              <a>
                <img :src="`http://localhost:2468/uploads/${item.imgs}`" alt />
              </a>
              <div>
                <a>{{item.title}}</a>
                <p>{{item.vertion}}</p>
              </div>
              <p>
                <span>参考价：</span>
                <span>￥{{item.price}}</span>
              </p>
            </div>
          </li>
        </ul>
        <button class="loadmore" @click="loadMore({is:isSort.jiage,id:$route.query.id})">加载更多</button>
      </section>
    </main>
    <footer></footer>
    <div class="back-top" @click="backTop()">
      <img src="../assets/img/phone-productlist6.png" alt />
    </div>
    <el-drawer
      class="drawer"
      :visible.sync="drawer"
      :direction="direction"
      :show-close="false"
      size="85%"
    >
      <div class="drawer-ks">
        <span>款式</span>
        <img src="../assets/img/phone-productlist4.png" alt />
      </div>
      <ul class="drawer-dkm">
        <li>对开门</li>
        <li>十字对开门</li>
        <li>多门</li>
        <li>三门</li>
        <li>两门</li>
        <li>单门</li>
      </ul>
      <div class="drawer-ks">
        <span>总容积</span>
        <img src="../assets/img/phone-productlist4.png" alt />
      </div>
      <ul class="drawer-dkm">
        <li>600升以上</li>
        <li>501-600升</li>
        <li>301-500升</li>
        <li>201-300升</li>
        <li>101-200升</li>
        <li>100升及以下</li>
      </ul>
      <div class="drawer-ks drawer-ys">
        <span>制冷方式</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>颜色</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>面板材质</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>能效等级</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>压缩机</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>控温方式</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>宽度</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>高度</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>深度</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys">
        <span>功能特色</span>
        <img src="../assets/img/phone-productlist5.png" alt />
      </div>
      <div class="drawer-ks drawer-ys drawer-jd">
        <span>智慧家电</span>
        <input type="checkbox" />
      </div>
      <div class="drawer-ks drawer-ys drawer-jd">
        <span>活动精选</span>
        <input type="checkbox" />
      </div>
      <div class="drawer-ks drawer-ys drawer-jd">
        <span>已下市</span>
        <input type="checkbox" />
      </div>
      <div class="drawer-ks drawer-kong"></div>
      <div class="drawer-btn">
        <button>重置</button>
        <button>确定</button>
      </div>
    </el-drawer>
    <FooterTab />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { setMsg } from "@/utils/product";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      active: 0,
      isSort: {
        //false是降序true是升序
        shijian: false,
        renqi: false,
        jiage: false
      }
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    this.getProductClassifyData({
      id: this.$route.query.id
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    ...mapActions("productlist", [
      "getProductClassifyData",
      "loadMore",
      "priceSort"
    ]),
    barClk(index) {
      //筛选bar点击时，根据价格排序
      if (this.active == index && this.active == 3) {
        this.isSort.jiage = !this.isSort.jiage;
        this.priceSort({
          is: this.isSort.jiage,
          id: this.$route.query.id
        });
      } else if (index == 3) {
        this.isSort = {
          shijian: false,
          renqi: false,
          jiage: false
        };
        this.active = index;
        this.priceSort({
          is: this.isSort.jiage,
          id: this.$route.query.id
        });
      } else {
        this.isSort = {
          shijian: false,
          renqi: false,
          jiage: false
        };
        this.active = index;
        this.getProductClassifyData({
          id: this.$route.query.id
        });
      }
    },
    //滚动事件
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop.toFixed(0) * 1 > 230) {
        let phoneBar = document.getElementsByClassName("phone-bar")[0];
        phoneBar.style.position = "fixed";
        phoneBar.style.width = "92%";
        phoneBar.style.top = "0px";
        phoneBar.style.left = "0px";
      } else {
        let phoneBar = document.getElementsByClassName("phone-bar")[0];
        phoneBar.style.position = "";
        phoneBar.style.width = "";
        phoneBar.style.top = "0px";
        phoneBar.style.left = "0px";
      }
      if (scrollTop.toFixed(0) * 1 > 380) {
        let backTop = document.getElementsByClassName("back-top")[0];
        backTop.style.display = "flex";
      } else {
        let backTop = document.getElementsByClassName("back-top")[0];
        backTop.style.display = "none";
      }
    },
    //返回顶部
    backTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //打开抽屉
    openDrawer() {
      this.drawer = true;
    },
    //商品详情
    goDetail(item) {
      // console.log(item)
      this.$router.push({ path: "/detail" });
      window.removeEventListener("scroll", this.scrollToTop);
      setMsg(item);
    }
  },
  computed: {
    ...mapState("productlist", ["productClassifyData"])
  }
};
</script>

<style>
body {
  margin: 0;
}
</style>


<style scoped src="../assets/css/productlist.css">
</style>